<template>
	<view>
		<form>
		<view class="uni-title uni-common-pl">日期</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="form.dates" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{form.dates}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-title uni-common-pl">触犯规则</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择
				</view>
				<view class="uni-list-cell-db">
					<picker v-if="ruleList.length > 0" @change="changeRule" :value="ruleIndex" :range="ruleList" range-key="title">
						<view class="uni-input">{{ rule }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-title uni-common-pl">班级</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择
				</view>
				<view class="uni-list-cell-db">
					<picker v-if="classList.length > 0" @change="changeClass" :value="classIndex" :range="classList" range-key="title">
						<view class="uni-input">{{ classList[classIndex].title }}</view>
					</picker>
				</view>
			</view>
		</view>
		<uni-section title="请行选择学生" type="line"></uni-section>
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in list" :key="item.userId">
					<view>
						<checkbox :value="item.userId" :checked="item.checked" />
					</view>
					<view>{{item.name}} {{item.code}}</view>
				</label>
			</checkbox-group>
		</view>
		<view class="uni-btn-v">
			<button  type="primary"  @click="doCommit">提交信息</button>
		</view>
		</form>
	</view>
</template>

<script>
	import { listClass, listStudent, getCurrentSemster } from '@/api/base.js'
	import { listRule, addStudent } from '@/api/quantify.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				classList: [],
				ruleList: [],
				classIndex: 0,
				ruleIndex:0,
				dateIndex:0,
				type: '3',
				list: [],
				form: {
					semId: null,
					ruleId: null,
					stuIds: [],
					classId: null,
					ruleId: null,
					dates: currentDate,
				}
			}
		},
		onLoad(option) {
			listClass({status: '1'}).then(response => {
				this.classList = response.rows;
			})
			listRule({status: '1', type: this.type}).then(response => {
				this.ruleList = response.rows;
				this.form.ruleId = this.ruleList[0].id;
			})
			getCurrentSemster().then(response => {
				this.form.semId = response.data.id;
			})
		},
		methods:{
			loadStudent() {
				listStudent({classId:this.form.classId, status:'1'}).then(response => {
					for(var i=0;i<response.rows.length;i++){
						response.rows[i].checked = false;
						response.rows[i].userId += '';
						response.rows[i].title = response.rows[i].name + ' ' + response.rows[i].code;
					}
					this.list = response.rows;
				});
			},
			changeClass(e) {
				this.classIndex = e.target.value;
				this.form.classId = this.classList[this.classIndex]['id'];
				this.loadStudent();
			},
			changeRule(e) {
				this.ruleIndex = e.target.value;
				this.form.ruleId = this.ruleList[this.ruleIndex]['id'];
			},
			checkboxChange(e){
				var values = e.detail.value;
				for (var i = 0; i < this.list.length; i++) {
					const item = this.list[i]
					if(values.includes(item.userId)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				this.form.stuIds = values;
			},
			bindPickerChange: function(e) {
				this.dateIndex = e.target.value
			},
			bindDateChange: function(e) {
				this.form.dates = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 1;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			doCommit() {
				if(this.form.stuIds == null || this.form.stuIds.length == 0){
					this.errorMsg('至少选择一个学生!');
					return;
				}
				addStudent(this.form).then(r => {
					this.successMsg('提交信息成功');
					this.form.stuIds = [];
					for(var i=0;i<this.list.length;i++){
						this.list[i].checked = false;
					}
				})
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			rule() {
				let r = this.ruleList[this.ruleIndex];
				return r.title + (r.mode == '1' ? ' 加 ' : ' 减 ')+ r.score +'分';
			}
		}
	}
</script>

<style>
</style>
